<template>
  <div v-loading="loading">
    <!--  选择用户组件  -->
    <div class="flex-container" style="margin-left: 10px">
      <el-select v-model="userSelect" multiple placeholder="请选择">
        <el-option
            v-for="item in selectValues"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

      <el-button type="primary" style="margin-left: 10px" @click="refreshApi" :loading="refreshLoad">重新统计</el-button>
    </div>

    <el-row :gutter="10" style="margin: 10px 0">
      <el-col :span="12">
        <el-card>
          <div style="width: 100%;height: 400px;" id="line"></div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <div style="width: 100%;height: 400px;" id="bar"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin: 10px 0" >
      <el-col :span="12">
        <el-card>
          <div style="width: 100%;height: 400px;" id="pie"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import * as echarts from 'echarts'

const userActiveOption = {
  title :{
    text: '近期用户活跃度',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis' //鼠标放上显示数值
  },
  legend: {
    orient: 'vertical', //水平
    left: 'left',
  },
  grid: {
    top: '30%'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: []
};

const serviceCountOption = {
  title :{
    text: '近期系统服务次数',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis' //鼠标放上显示数值
  },
  legend: {
    orient: 'vertical', //水平
    left: 'left'
  },
  grid: {
    top: '30%'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: []
};

const modelCountOption = {
  title :{
    text: '模块使用量占比',
    subtext: '最近7天数据',
    left: 'center'
  },
  tooltip: {
    // trigger: 'axis' //鼠标放上显示数值
    trigger: 'item' //
    ,formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical', //水平
    left: 'left'
  },
  series: []
};

export default {
  name: "Charts",
  data(){
    return {
      loading: true,
      selectValues: [],
      userSelect: [], //已选择的用户的value值
      refreshLoad: false
    }
  },
  //dom还未渲染好
  created(){

  },
  //页面容器全部加载好之后执行
  mounted() {
    this.initPage = () => {
      //折线图
      let lineDom = document.getElementById('line');
      let lineChar = echarts.getInstanceByDom(lineDom);
      if (lineChar == null){
        lineChar = echarts.init(lineDom);
      }
      // lineChar.setOption(userActiveOption)
      //柱状图
      let barDom = document.getElementById('bar');
      let barChar = echarts.getInstanceByDom(barDom);
      if (barChar == null){
        barChar = echarts.init(barDom);
      }
      // barChar.setOption(serviceCountOption)
      //饼图
      let pieDom = document.getElementById('pie');
      let pieChar = echarts.getInstanceByDom(pieDom);
      if (pieChar == null){
        pieChar = echarts.init(pieDom);
      }
      // pieChar.setOption(modelCountOption)

      this.$request.get('/charts/findByLast').then(res => {
        if(res.code === "200"){
          if (res.data){
            let line = res.data.line
            let bar = res.data.bar
            let pie = res.data.pie

            userActiveOption.title.text = line.text;
            userActiveOption.xAxis.data = line.week;
            userActiveOption.series = line.series;

            serviceCountOption.title.text = bar.text;
            serviceCountOption.xAxis.data = bar.week;
            serviceCountOption.series = bar.series;

            modelCountOption.series = pie


          }else {
            this.refreshApi(); //若没有数据则自动刷新生成数据
          }
        }else {
          this.$message.error("获取最新一条数据失败："+res.msg)
        }
        this.loading = false
        //赋值
        lineChar.setOption(userActiveOption,true)
        barChar.setOption(serviceCountOption,true)
        pieChar.setOption(modelCountOption,true)
      }).catch(error => {
        this.$message.error("接口异常：",error)
      })

      //初始化选择框
      this.initRecipientSelect();
    };
    this.initPage();
  },
  beforeDestroy() {
  },
  watch: {
  },
  methods: {
    //初始化用户列表
    initRecipientSelect(){
      this.$request({
        method: 'GET',
        url: '/user/getSelect',
      }).then((res) => {
        if (res.code === '200') {
          this.selectValues = res.data;
        } else {
          this.$message.error(res.msg) //错误信息
          return false
        }
      })
    },
    refreshApi(){
      //判断参数上限
      if (this.userSelect.length > 4){
        this.$message.warning("当前设置最多仅支持同时统计4人，如有特殊需要请联系管理员")
        return
      }
      this.refreshLoad = true
      this.$request.post('/charts/refresh',{
        lineText: '近期用户活跃度',
        barText: '近期系统服务次数',
        pieText: '模块使用量占比',
        userSelect: this.userSelect
      }).then(res => {
        if(res.code === "200"){
          this.$message.success("刷新成功")
          if (this.initPage){
            this.initPage();
          }else {
            this.$message.error("页面初始化函数异常")
          }
        }else {
          this.$message.error("获取分页数据失败："+res.msg)
        }
        this.loading = false
        this.refreshLoad =false
      })
    }
  }
}
</script>

<style scoped>


</style>